<template>
    <div class="dialog_alert" @touchmove="!this.scroll && $event.preventDefault()">
        <div class="mask" @click="hideOnBlur && (show = false)" v-show="show" :transition="maskTransition"></div>
        <div class="dialog">
            <div class='dialog-content' v-show="show"  :transition="dialogTransition">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
/*import lang from "../../public/store/modules/lang";*/
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    maskTransition: {
      type: String,
      default: 'fade'
    },
    dialogTransition: {
      type: String,
      default: 'dialog'
    },
    hideOnBlur: Boolean,
    scroll: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    show (val) {
      this.$emit(val ? 'on-show' : 'on-hide')
    }
  }
}
</script>

<style lang="sass">
@import '../../public/css/comps/dialog';
/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.dialog-enter{
    animation: zoomIn 0.5s forwards;
} 
.dialog-leave {
     animation: zoomOut 0.3s forwards;
}
</style>